<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning">
      <div class="card p-l-16">
        <a-row :gutter="16" type="flex" align="middle">
          <a-col :span="6">
            <a-row type="flex" align="middle">
              <a-col :span="12">
                <span class="title">调查报告</span>
              </a-col>
              <a-col :span="12">
                <viewerImage
                  fit="contain"
                  :lazy="false"
                  :src="require('@/assets/images/InvestigationReport.png')"
                  style="width: 100px; height: 100px"
                ></viewerImage>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="18">
            <a-descriptions>
              <a-descriptions-item label="现住房性质">{{ reportData.HousProperties }}</a-descriptions-item>
              <a-descriptions-item label="现住房产权人姓名">{{ reportData.HousProperty }}</a-descriptions-item>
              <a-descriptions-item label="现住房建筑面积㎡">{{ reportData.BurveyBuildArea }}㎡</a-descriptions-item>
              <a-descriptions-item label="现住房实际居住人数">{{ reportData.BurveyNumber }}</a-descriptions-item>
              <a-descriptions-item label="申请保障人数">{{ reportData.BurveyVfyNumber }}</a-descriptions-item>
              <a-descriptions-item label="自有产权房个人产权面积㎡"
                >{{ reportData.BurveyAreaPer }}㎡</a-descriptions-item
              >
              <a-descriptions-item label="家庭人均月收入">{{ reportData.BurveyIncome }}元</a-descriptions-item>
              <a-descriptions-item label="现住房是否用于测算人均住房建筑面积" :span="2">{{
                reportData.BurveyIfTestArea
              }}</a-descriptions-item>
              <a-descriptions-item label="备注" :span="3">{{ reportData.BeviewRemark || '无' }}</a-descriptions-item>
              <a-descriptions-item label="调查人">{{ reportData.BeviewAgent }}</a-descriptions-item>
              <a-descriptions-item label="调查时间">
                {{ reportData.BeviewDate | moment('YYYY-MM-DD') }}
              </a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
      </div>
      <a-descriptions bordered layout="vertical" :column="2">
        <a-descriptions-item label="社区服务中心意见">
          <div class="p-y-16" v-if="this.$isEmpty(reportData.BeviewResult)">
            <a-empty description="暂无社区服务中心意见" />
          </div>
          <a-space direction="vertical" v-else>
            <!-- <p class="title">社区服务中心意见</p> -->
            <p>
              经调查初审，该申请家庭
              <span class="result" :class="reportData.BeviewResult === '符合' ? 'text-success' : 'text-error'">{{
                reportData.BeviewResult
              }}</span
              >我市公共租赁住房保障条件，公示无异议。
            </p>
            <!-- <p v-if="reportData.BeviewRemark">
              备注：{{ reportData.BeviewRemark }}
            </p>-->
            <p>
              经办人：{{ reportData.BeviewAgentx }}&ensp;&ensp;&ensp;审核日期：{{
                reportData.BeviewDatex | moment('YYYY-MM-DD')
              }}
            </p>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item label="区住房和城乡建设局意见">
          <div class="p-y-16" v-if="this.$isEmpty(reportData.VerifyResult)">
            <a-empty description="暂无区住房和城乡建设局意见" />
          </div>
          <a-space direction="vertical" v-else>
            <!-- <p class="title">区住房和城乡建设局意见</p> -->
            <p>
              经审核，该申请家庭
              <span class="result" :class="reportData.VerifyResult === '符合' ? 'text-success' : 'text-error'">{{
                reportData.VerifyResult
              }}</span
              >我市公共租赁住房保障条件。
            </p>
            <p v-if="reportData.VerifyRemark">备注：{{ reportData.VerifyRemark }}</p>
            <p>
              经办人：{{ reportData.VerifyAgent }}&ensp;&ensp;&ensp;审核日期：{{
                reportData.VerifyDate | moment('YYYY-MM-DD')
              }}
            </p>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item :span="2" label="市住房和城乡建设局意见">
          <div class="p-y-16" v-if="this.$isEmpty(reportData.CityVfyResult)">
            <a-empty description="暂无市住房和城乡建设局意见" />
          </div>
          <a-space direction="vertical" v-else>
            <!-- <p class="title">市住房和城乡建设局意见</p> -->
            <p>
              经核准相关证明材料和公示后，该申请家庭
              <span class="result" :class="reportData.CityVfyResult === '符合' ? 'text-success' : 'text-error'">{{
                reportData.CityVfyResult
              }}</span
              >贵阳市人民政府公布的公共租赁住房保障条件
            </p>
            <p v-if="reportData.CityVfyReport">备注：{{ reportData.CityVfyReport }}</p>
            <p>
              经办人：{{ reportData.CityVfyAgent }}&ensp;&ensp;&ensp;审核日期：{{
                reportData.CityVfyDate | moment('YYYY-MM-DD')
              }}
            </p>
          </a-space>
        </a-descriptions-item>
        <a-descriptions-item :span="2" label="市住房和城乡建设局意见" v-if="!this.$isEmpty(reportData.CityRfyResult)">
          <a-space direction="vertical">
            <!-- <p class="title">市住房和城乡建设局意见</p> -->
            <p>
              经核准相关证明材料和公示后，该申请家庭
              <span class="result" :class="reportData.CityRfyResult === '符合' ? 'text-success' : 'text-error'">{{
                reportData.CityRfyResult
              }}</span
              >贵阳市人民政府公布的公共租赁住房保障条件
            </p>
            <p>
              经办人：{{ reportData.CityRfyAuditor }}&ensp;&ensp;&ensp;审核日期：{{
                reportData.CityRfyDate | moment('YYYY-MM-DD')
              }}
            </p>
          </a-space>
        </a-descriptions-item>
      </a-descriptions>
    </a-spin>
  </a-card>
</template>

<script>
import { viewerImage } from '@/components'
import { getNewProposerbyID } from '@/api/common'

export default {
  components: {
    viewerImage,
  },
  props: {
    proposerID: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      spinning: false,
      reportData: {},
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.spinning = true
      getNewProposerbyID({ ProposerID: this.$route.params.id || this.proposerID })
        .then((res) => {
          this.reportData = res
        })
        .finally(() => {
          this.spinning = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}

.result {
  font-size: large;
  padding: 0 10px;
  font-weight: bold;
}
.card {
  /deep/ .ant-space {
    width: 100%;
    padding: 16px;
  }
}
</style>
